<template>
	<view class="confirm">
		<view class="card">
			<view class="order-info">
				<view v-if="formData.applicant_name" class="">
					<text>提交人：{{formData.applicant_name}}</text>
				</view>
				<!-- <view class="">
					<text>提交时间：2023年4月28日 上午09时23分</text>
				</view> -->
				<view v-if="formData.car_demand" class="">
					<text>{{ formData.form_type === 3 ? '文件类型' : '用车需求' }}：{{ formData.car_demand }}</text>
				</view>
				<view v-if="formData.car_destination" class="">
					<text>{{formData.form_type === 3 ? '配送地址' : '目的地'}}：{{ formData.car_destination }}</text>
				</view>
				<view v-if="formData.start_time" class="">
					<text>出车时间：{{ formData.start_time }}</text>
				</view>
				<view v-if="formData.end_time" class="">
					<text>预计还车：{{ formData.end_time }}</text>
				</view>
				<view v-if="formData.car_reasons" class="">
					<text>用车事由：{{ formData.car_reasons }}</text>
				</view>
			</view>

			<view v-if="formData.car_data && formData.car_data.length" class="list">
				<view class="item" v-for="(item, index) in formData.car_data" :key="index">
					<view class="flex align-center justify-between">
						<view class="car-name">
							<text>{{ item.pinpai }}</text>
						</view>
						<view class="num-wrap">
							<text class="num">{{ item.count }}</text>
							<text>辆</text>
						</view>
					</view>

					<view v-if="cat.pailiang || cat.zuoshu || cat.price" class="attr">
						<text v-if="cat.price">{{ cat.price }}元/天</text>
						<text v-if="cat.pailiang" class="inline-block padding-l24">{{ cat.pailiang }}</text>
						<text v-if="cat.zuoshu" class="inline-block padding-l24">{{ cat.zuoshu }}座</text>
					</view>

					<view class="info">
						<view class="driver">
							<view class="flex align-center">
								<text>驾车司机：</text>
								<radio-group class="flex align-center" @change="radioChange($event, item)">
									<label class="flex align-center">
										<radio :value="0" :checked="0 === item.is_driver" color="#0052D9"
											style="transform: scale(0.8);" />
										<view>不需要司机</view>
									</label>
									<label class="flex align-center padding-l32">
										<radio :value="1" :checked="1 === item.is_driver" color="#0052D9"
											style="transform: scale(0.8);" />
										<view>需要司机</view>
									</label>
								</radio-group>
							</view>

							<!-- <view v-if="current === 1" class="driver-list flex align-center justify-between">
								<view class="padding-r24">
									<text v-if="driverList.length === 0" class="font-size-24 text-grey-51">请选择司机（多选）</text>
									<text v-for="(item, index) in driverList" :key="index">{{ item }}{{ index < driverList.length-1 ? '，' : '' }}</text>
								</view>
								<text class="iconfont">&#xe64b;</text>
							</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>

		<view style="height: 200rpx;"></view>
		<view class="footer" :style="{'padding-bottom': safeAreaBottom ? safeAreaBottom+'px' : '24rpx'}">
			<button @click="submit">提交申请</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				formData: {},
				tmplIds: [],
				timer: null,
				loading: false
			};
		},
		computed: {
			...mapState('common', ['safeAreaBottom', 'form_type_data']),
		},
		onLoad(options) {
			if (options.formData) {
				this.formData = JSON.parse(decodeURIComponent(options.formData))
			}
			
			console.log('formData', this.formData);
			if (this.formData.form_type == 1) {
				uni.setNavigationBarTitle({
					title: '常规用车申请'
				})

			} else if (this.formData.form_type == 2) {
				uni.setNavigationBarTitle({
					title: '临时用车申请'
				})
			} else {
				uni.setNavigationBarTitle({
					title: '文件配送申请'
				})
			}

			const data = this.form_type_data.find(item => item.value == this.formData.form_type)

			if (data) {
				this.tmplIds = data.template_id
			}


		},
		methods: {
			radioChange(event, item) {
				const {
					value
				} = event.detail
				item.is_driver = Number(value)
				this.$forceUpdate()
			},
			submit() {
				if (!this.loading) {
					this.loading = true
					// 创建一个新的定时器，延迟执行实际处理函数
					const params = JSON.parse(JSON.stringify(this.formData))
					if (this.formData.form_type == 1) {
						params.car_data = JSON.stringify(params.car_data)
					}
					this.requestSubscribeMessage(params)
					setTimeout(()=> {
						this.loading = false
					}, 1000)
				}
			},
			add(params) {
				this.$api.orderAddApi(params).then(res => {
					console.log('提交成功', res);
					uni.showToast({
						title: res.retmsg
					})
					uni.$emit('again')
					uni.navigateTo({
						url: '/pages/confirm/status/status?id=' + res.id + '&form_type=' + params
							.form_type + '&type=statusToDetail'
					})
				}).catch(err => {
					console.log(err);
				})
			},
			edit(params) {
				this.$api.orderEditApi(params).then(res => {
					console.log('提交成功', res);
					uni.showToast({
						title: res.retmsg
					})

					uni.$emit('again')
					uni.navigateBack({
						delta: 3
					})
				}).catch(err => {
					console.log(err);
				})
			},
			requestSubscribeMessage(params) {
				// 这里是获取下发权限地方，根据官方文档，可以根据  wx.getSetting() 的 withSubscriptions   这个参数获取用户是否打开订阅消息总开关。后面我们需要获取用户是否同意总是同意消息推送。所以这里要给它设置为true 。
				uni.getSetting({
					withSubscriptions: true, //  这里设置为true,下面才会返回mainSwitch
					success: (res) => {
						// console.log('res', res);
						// 调起授权界面弹窗
						if (res.subscriptionsSetting.mainSwitch) { // 用户打开了订阅消息总开关
							// if (res.subscriptionsSetting.itemSettings != null) { // 用户同意总是保持是否推送消息的选择, 这里表示以后不会再拉起推送消息的授权
							// 	// let moIdState = res.subscriptionsSetting.itemSettings[this.tmplIds]; // 用户同意的消息模板id
							// 	// console.log('moIdState', moIdState);
							// 	// if (moIdState === 'accept') {
							// 	// 	console.log('接受了消息推送');

							// 	// } else if (moIdState === 'reject') {
							// 	// 	console.log("拒绝消息推送");

							// 	// } else if (moIdState === 'ban') {
							// 	// 	console.log("已被后台封禁");

							// 	// }
							// 	let tmplIds = []
							// 	for (var i = 0; i < this.tmplIds.length; i++) {
							// 		this.tmplIds[i]
							// 		if (res.subscriptionsSetting.itemSettings[this.tmplIds[i]] !== 'accept') {
							// 			tmplIds.push(this.tmplIds[i])
							// 		}
							// 	}
							// 	if (this.tmplIds.length > tmplIds.length) {
							// 		this.handleRSB(this.tmplIds, params)
							// 	}
							// } else {
							// 	this.handleRSB(this.tmplIds, params)
							// }
							this.handleRSB(this.tmplIds, params)
						} else {
							uni.showModal({
								title: '订阅消息未开启',
								content: '请点击右上角胶囊-设置-订阅消息，打开订阅权限',
								showCancel: false
							})
						}
					},
					fail: function(error) {
						console.log(error);
					},
				})
			},
			handleRSB(tmplIds, params) {
				uni.requestSubscribeMessage({ // 调起消息订阅界面
					tmplIds: tmplIds,
					success: (res) => {
						console.log('订阅成功', res);
						uni.showToast({
							title: '订阅成功'
						})
					},
					fail: (err) => {
						console.log('订阅失败', err);
						uni.showToast({
							icon: 'none',
							title: '订阅失败'
						})
					},
					complete: () => {
						if (params.id) {
							this.edit(params)
						} else {
							this.add(params)
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.confirm {
		padding: 32rpx;
		box-sizing: border-box;

		.card {
			padding: 32rpx;
			border-radius: 16rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
		}

		.order-info {
			font-weight: 400;
			font-size: 26rpx;
			line-height: 44rpx;
			color: rgba(0, 0, 0, 0.9);
		}

		.status {
			// width: 192rpx;
			height: 48rpx;
			padding: 0 24rpx;
			font-weight: 400;
			font-size: 24rpx;
			display: flex;
			line-height: 40rpx;
			border-radius: 4rpx;
			align-items: center;
			justify-content: center;
			color: rgba(0, 0, 0, 0.6);
			background: rgba(0, 0, 0, 0.1);
		}

		.status-active {
			color: #ED7B2F;
			background: rgba(237, 123, 47, 0.1);
		}

		.status-complate {
			color: rgba(87, 147, 127, 1);
			background-color: rgba(87, 147, 127, 0.5);
		}

		.list {
			padding-top: 16rpx;
		}

		.item {
			flex-shrink: 0;
			padding: 32rpx;
			margin-bottom: 32rpx;
			border-radius: 12rpx;
			border: 1rpx solid #999;

			.car-name {
				color: #000000;
				font-weight: 600;
				font-size: 34rpx;
				line-height: 44rpx;
			}

			.car-type {
				color: #000000;
				font-weight: 400;
				font-size: 28rpx;
				line-height: 44rpx;
				padding-left: 8rpx;
				display: inline-block;
			}

			.num-wrap {
				font-weight: 400;
				font-size: 34rpx;
				line-height: 44rpx;
				color: #000000;
			}

			.num {
				color: #ED7B2F;
				font-weight: 600;
			}

			.attr {
				font-weight: 400;
				font-size: 26rpx;
				color: #c20000;
				line-height: 32rpx;
				padding-top: 16rpx;
			}

			.info {
				font-weight: 400;
				font-size: 26rpx;
				padding-top: 6rpx;
				line-height: 44rpx;
				color: rgba(0, 0, 0, 0.6);
			}
		}

		.driver {
			// margin-top: 16rpx;
			padding-top: 16rpx;
			// border-top: 1rpx solid #999;
		}

		.driver-list {
			margin-top: 24rpx;
			border-radius: 8rpx;
			padding: 4rpx 16rpx;
			border: 1rpx solid #999;
		}

		.footer {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			z-index: 9;
			padding: 24rpx 32rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			box-shadow: 0rpx 0rpx 22rpx rgba(0, 0, 0, 0.1);

			button {
				height: 84rpx;
				color: #FFFFFF;
				font-size: 32rpx;
				line-height: 84rpx;
				border-radius: 100rpx;
				background-color: var(--primary-color);

				&::after {
					border: none;
				}
			}
		}
	}
</style>